<template>
  <div style = "padding: 20px 0 ; border-bottom: 1px solid #efefef">
    <el-row :gutter = "20">
      <el-col :span = "2">
        <el-avatar size = "large" :src = "logo" />
      </el-col>
      <el-col class = "column-container item-container" :span = "22">
        <!--名字，时间-->
        <div class = "info">
          <router-link to = "/">你的名字</router-link>
          &nbsp; <span class = "info-type">怎么着</span> <br />
          <span class = "info-time">11:11</span>
        </div>
        <!--正文-->
        <div class = "text">
          <span>正文正文正文正文正文正文正文正文正文正文
          正文正文正文正文正文正文正文正文正文正文正文正文正文正文
          正文正文正文正文正文正文正文正文正文正文正文正文正文正文
          正文正文正文正文正文正文正文正文正文正文正文正文正文正文
          正文正文正文正文</span>
        </div>
        <!--点赞，分享，评论-->
        <div class = "operate">
          <span>
            <i-thumbs-up theme = "outline" size = "17" :fill = "['#808080','#fff']" :strokeWidth = "3"
                         strokeLinejoin = "miter" />(12) </span>
          <span>
            <i-share theme = "two-tone" size = "17" :fill = "['#808080' ,'#fff']" :strokeWidth = "3"
                     strokeLinejoin = "miter" /> (12)</span>
          <span @click = "this.itemShowComments = ! this.itemShowComments">
            <i-comment theme = "two-tone" size = "17"
                       :fill = "['#808080' ,'#fff']"
                       :strokeWidth = "3"
                       strokeLinejoin = "miter" />(12)</span>
        </div>
        <!--评论内容-->
        <el-row style = "padding:10px 0; background-color:rgba(106,105,105,0.12);" v-show = "itemShowComments">
          <el-col :span = "24">
            <div style = "padding:5px 10px;">
              <base-comment-list />
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import BaseCommentList from "@/components/Base/BaseCommentList";

import logo from '@/assets/logo.png'
import {ref} from "vue";

let itemShowComments = ref(false)
</script>

<style lang = "less" scoped>
.item-container {
  .info {
    a {
      color: blue;
      padding: 5px 5px 5px 0;

      &:hover {
        opacity: .8;
      }
    }

    .info-type {
      font-size: 14px;
      color: #808080;
    }

    .info-time {
      font-size: 14px;
      color: #808080;

      &:hover {
        opacity: .8;
      }
    }
  }

  .text {
    padding: 10px 0;
    font-size: 14px;
  }

  .operate {
    display: flex;
    justify-content: flex-end;

    > span {
      padding-right: 8px;
      color: #808080;
      font-size: 10px;

      &:hover {
        opacity: .8;
      }
    }
  }
}
</style>